<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>红色教育网站</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/welcome.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</head>
<!-- 添加scroll控件，滚动监听 -->
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- 响应式导航栏 -->
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="/images/logo.png"
                     class="img--responsive img-thumbnail" style="width: 120px">
            </a>
            <!-- 小尺寸下，隐藏导航菜单 -->
            <button type="button" class="navbar-toggle" data-toggle="collspse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#course">课程学习</a></li>
                <li><a href="#popularNav">热门导航</a></li>
                <li><a href="#message">网站留言</a></li>
                <li><a href="#pricing">套餐</a></li>
                <li><a href="#contact">联系我们</a></li>
                <li><a href="#" id="htgl">后台管理</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 问题查询 -->
<div class="jumbotron text-center">
    <h1>Red Education Network</h1>
    <p>我们专注于教育</p>
    <!-- form-inline让表单元素水平排列 -->
    <form class="form-inline" action="/question/searchQuestion">
        <input type="text" name="title" class="form-control" size="50" placeholder="请输入你要搜索的内容"/>
        <input type="submit" class="btn btn-danger" value="查询"/>
    </form>
</div>
<!-- 课程学习1 -->
<div id="course" class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col_two">
            <h2>关于我们</h2>
            <h4>提供各类学习资料</h4>
            <h4>热爱教育的学习天地</h4>
            <a href="/courseLearning">
                <button class="btn btn-default btn-lg">进入学习</button>
            </a>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-signal logo"></span>
        </div>
    </div>
</div>
<!-- 课程学习2 -->
<div class="container-fluid text-center bg-grey">
    <h2>课程学习</h2>
    <h4>向往的学习教育</h4>
    <div class="row text-center">
        <div class="col-sm-4">
            <a href="/course01" class="thumbnail">
                <img src="/images/cl_01.png">
                <p><strong>国内研学</strong></p>
                <p>执行力军魂，企业拓展训练</p>
            </a>
        </div>
        <div class="col-sm-4">
            <a href="/course02" class="thumbnail">
                <img src="/images/cl_02.png">
                <p><strong>红色文化</strong></p>
                <p>福建红色文化</p>
            </a>
        </div>
        <div class="col-sm-4">
            <a href="/course03" class="thumbnail">
                <img src="/images/cl_03.png">
                <p><strong>广西文化</strong></p>
                <p>广西百色红色培训</p>
            </a>
        </div>
    </div>
</div>
<!-- 热门导航 -->
<div id="popularNav" class="container-fluid text-center">
    <h2>热门导航</h2>
    <br>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-2">
                    排名
                </div>
                <div class="col-md-3">
                    名称
                </div>
                <div class="col-md-7">
                    热度
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row" th:each="pn:${session.pnList}">
                <div class="col-md-2">
                    <span class="text-primary">[[${pn.getNavNum()}]]</span>
                </div>
                <div class="col-md-3">
                    <span class="text-primary">[[${pn.getNavName()}]]</span>
                </div>
                <div class="col-md-5">
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-success active"
                             th:style="'width:'+ ${pn.getNavHeat()} + '%;'">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-leaf"></span>
            <h4>创造</h4>
            <p>Create a better tomorrow....</p>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-leaf"></span>
            <h4>认证</h4>
            <p>Certified the best teachers....</p>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-leaf"></span>
            <h4>氛围</h4>
            <p>Create the best learning atmosphere....</p>
        </div>
    </div>
</div>
<!-- 网站留言 -->
<div id="message" class="container">
    <h2>网站留言</h2>
    <br>
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="/images/ly_01.png">
            </div>
            <div class="item">
                <img src="/images/ly_02.png">
            </div>
            <div class="item">
                <img src=" /images/ly_03.png">
            </div>
        </div>
        <!-- 轮播导航 左右切换的按钮 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
</div>

<div id="msgBox">
    <h2>来 , 说说你在做什么 , 想什么</h2>
    <div><textarea name="m_content" id="conBox" class="f-text"></textarea></div>
    <div class="tr">
        <p>
            <button id="publish" class="btn btn-danger">发表</button>
        </p>
    </div>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul id="tab">

        </ul>
    </div>
</div>
<!-- 套餐 -->
<div id="pricing" class="container-fluid">
    <div class="text-center">
        <h2>套餐</h2>
        <h4>选择一份适合自己的方案</h4>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                    <h1>入门</h1>
                </div>
                <div class="panel-body">
                    <p><strong>HTML</strong></p>
                    <p><strong>CSS</strong></p>
                    <p><strong>JavaScript</strong></p>
                </div>
                <div class="panel-footer">
                    <h3>￥99</h3>
                    <button class="btn btn-lg">购买</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                    <h1>初级</h1>
                </div>
                <div class="panel-body">
                    <p><strong>csss3</strong></p>
                    <p><strong>JQuery</strong></p>
                    <p><strong>BootStrap</strong></p>
                </div>
                <div class="panel-footer">
                    <h3>￥199</h3>
                    <button class="btn btn-lg">购买</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                    <h1>进阶</h1>
                </div>
                <div class="panel-body">
                    <p><strong>HTML5</strong></p>
                    <p><strong>PHP</strong></p>
                    <p><strong>MySQL</strong></p>
                </div>
                <div class="panel-footer">
                    <h3>￥399</h3>
                    <button class="btn btn-lg">购买</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页脚 -->
<div id="contact" class="container-fluid bg-grey">
    <h2 class="text-center">联系我们</h2>
    <br>
    <div class="row">
        <div class="col-sm-5">
            <p>联系我们，我们将在24小时内回复您</p>
            <p><span class="glyphicon glyphicon-map-marker"></span>西安雁塔区</p>
            <p><span class="glyphicon glyphicon-phone"></span>+00 18888888888</p>
            <p><span class="glyphicon glyphicon-envelope"></span>my email@somthing.com</p>
        </div>
        <div class="col-sm-7">
            <div class="row">
                <div class="col-sm-6 form-group">
                    <input type="text" name="name" id="name" class="form-control" placeholder="Name" required/>
                </div>
                <div class="col-sm-6 form-group">
                    <input type="text" name="name" id="email" class="form-control" placeholder="E-mail"
                           required/>
                </div>
            </div>
            <textarea class="form-control" id="comments" name="comments" placeholder="Comment"
                      rows="5"></textarea><br>
            <div class="row">
                <div class="col-sm-12 form-group">
                    <button class="btn btn-default pull-right" type="submit">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="container-fluid text-center">
    <a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span></a>
    <p>RedEMS Made By <a href="#"><span>红色教育</span></a></p>
</footer>
</body>
<script>
    $(function () {
        // 页面加载数据 MessageList
        rest();
        layer = layui.layer

        function rest() {
            $.ajax({
                url: "/message/queryAllMessage",
                type: "post",
                dataType: "json",
                success: function (data) {
                    showData(data);
                },
                error: function (msg) {
                    layer.msg("留言列表数据加载失败！", {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        }

        // 显示数据
        function showData(jsonList) {
            var str = "";
            for (var i = 0; i < jsonList.length; i++) {
                str = "<li><div class='userPic'><img src=\'/images/" + jsonList[i].msgUserFace + "\'/></div>"
                    + " <div class='content'><div class='userName'>" + jsonList[i].msgUsername + "</div>"
                    + " <div class='msgInfo'>" + jsonList[i].msgContent + "</div>"
                    + " <div class='times'><span> " + jsonList[i].msgDate + " </span></div></div> </li>"
                $("#tab").append(str);
            }
        }

        // 后台管理员验证  是否是超级管理员
        $('#htgl').click(function () {
            $.ajax({
                type: "post",
                url: "/checkAdmin",
                success: function (data) {
                    if (data == 'ok') {
                        window.location.href = "/htgl";
                    } else {
                        layer.msg("当前用户不是超级管理员，切换登录再来试试吧！", {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function (err) {
                    layer.msg("检查错误！" + err, {
                        icon: 2,
                        time: 1000
                    });
                }
            })
        })

        // 发表留言
        $('#publish').click(function () {
            let content = $('#conBox');
            $.ajax({
                type: "post",
                url: "/message/publishMessage",
                data: {
                    'content': content.val()
                },
                success: function (data) {
                    if (data != null) {
                        var userinfo = eval(data)[0];
                        $("#tab").append("<li><div class='userPic'><img src=\'/images/" + userinfo.msgUserFace + "\'/></div>"
                            + " <div class='content'><div class='userName'>" + userinfo.msgUsername + "</div>"
                            + " <div class='msgInfo'>" + userinfo.msgContent + "</div>"
                            + " <div class='times'><span> " + userinfo.msgDate + " </span></div></div> </li>");
                        layer.msg("发表成功！", {
                            icon: 1,
                            time: 1000
                        });
                        content.val("");
                    } else {
                        layer.msg("发表失败！", {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function (err) {
                    layer.msg("发表失败！", {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        });
    })
</script>
</html>

